<template>
  <div class="dashboard-editor-container">
    <div
      ref="selectdiv"
      class="selectclass"
      :style="{
        position: position,
        top: top,
        'line-height': lineheight + 'px',
        'margin-left': mleft + 'rem',
        width: wd,
        'background-color': backcolor,
      }"
    >
      <el-select
        v-if="logincpnid == sy"
        v-model="form.cpnid"
        style="margin-left: 44px"
        :style="{ float: 'left' }"
        placeholder="所有"
        clearable
        filterable
        class="filter-item"
        @change="CpnselectFn($event)"
      >
        <el-option
          v-for="item in cpnoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>

      <el-select
        v-model="form.paychannelid"
        :style="{ float: 'left' }"
        clearable
        filterable
        class="filter-item"
        placeholder="所有"
        @change="paychanelSelectFn($event)"
      >
        <el-option
          v-for="item in paytychanneloptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>
      <el-col :span="3" style="fl" :style="{ float: 'left' }">
        <el-date-picker
          v-model="form.StDt"
          type="date"
          placeholder="请选择开始日期"
          style="width: 100%"
          format="yyyy-MM-dd"
          @change="StDtChange($event)"
        />
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="form.EdDt"
          type="date"
          placeholder="请选择结束日期"
          style="width: 100%"
          format="yyyy-MM-dd"
          @change="EdDtChange($event)"
        />
      </el-col>
    </div>
    <div class="block" />

    <!-- 表格 -->

    <div class="table-container">
      <datatable
        :cpn-i-d="form.cpnid"
        :chnanel-id="form.paychannelid"
        :st-dt="form.StDt"
        :ed-dt="form.EdDt"
      />
    </div>

    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        class="col"
        style="padding-left: 0px !important; padding-right: 12px !important"
      >
        <div class="leftbox">
        
          <div style="position: absolute; right: 20px; top: 28px; z-index: 99">
            <div class="box2">
              <div
                v-for="item in paySwitch"
                :key="item.selected"
                :class="[item.selected == paycount ? 'active2' : '', 'item3']"
                :data-select="item.selected"
                @click="paycountChange"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
            <unusual
            :select-type="dayrecselectcount"
            :cpn-i-d="form.cpnid"
            :chnanel-id="form.paychannelid"
            :refsh="form.linechardayrefresh"
          />
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        class="col"
        style="padding-right: 0px !important; padding-left: 12px !important"
      >
        <div class="rightbox">
        
         <!-- 未处理异常数 -->
           <unhandle :cpn-i-d="form.cpnid" />
  
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        class="col"
        style="padding-left: 0px !important; padding-right: 12px !important"
      >
        <div class="leftbox">
        
          <div style="position: absolute; right: 20px; top: 28px; z-index: 99">
            <div class="box2">
              <div
                v-for="item in paySwitch"
                :key="item.selected"
                :class="[item.selected == paycount ? 'active2' : '', 'item3']"
                :data-select="item.selected"
                @click="paycountChange"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
           <thirdPayAll></thirdPayAll>

        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        class="col"
        style="padding-right: 0px !important; padding-left: 12px !important"
      >
        <div class="rightbox">
         <!-- 前置机在线检测 -->
         <monitoring :cpn-i-d="form.cpnid" />
  
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <footer>
          <pay></pay>
      </footer>
    </el-row>

  </div>
</template>

<script>
import datatable from "./components/datatable.vue"; // 表格
import unusual from "./components/unusual.vue"; // 异常数表表
import unhandle from "./components/unhandle.vue"  //未处理异常表
import monitoring from "./components/monitoring.vue" //前置机在线监控
import pay from "./components/pay.vue"
import thirdPayAll from "./components/third-pay-all.vue"  //
import { SelectAjax } from "@/api/common";
import sessionStorage from "@/api/Storage";
import commm from "@/api/unity";
export default {
  components: {
    datatable,
    unusual,
    unhandle,
    monitoring,
    thirdPayAll,
    pay
  },
  data() {
    return {
      sy: "system",
      logincpnid: "",
      position: "static",
      top: 0,
      initTop: 0,
      lineheight: 0,
      mleft: 1,
      wd: "auto",
      backcolor: "transparent",
      cpnoptions: [],
      paytychanneloptions: [],
      form: {
        act: "",
        cpnid: "",
        paytypeid: "",
        paychannelid: "",
        Account: "",
        AccountName: "",
        IsEmrgncy: false,
        IsRc: false,
        payType: ["Micropay"],
        StDt: "",
        EdDt: "",
        refsh: "",
        lineChartMoney: "",
        linechardayrefresh: "",
        unprocessedrefresh: "",
        pierefresh: "",
        charttimerefresh: "",
      },
      dayrecselectcount: 1,
      paycount: 1,
      dayrectabber: [
        {
          title: "月",
          selected: 0,
        },
        {
          title: "日",
          selected: 1,
        },
      ],
      paySwitch: [
        {
          title: "月",
          selected: 0,
        },
        {
          title: "日",
          selected: 1,
        },
      ],
    };
  },
  created() {
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    // this.title = userinfo.cpnName + '支付驾驶舱'
    this.form.cpnid = userinfo.cpnId;
    this.logincpnid = userinfo.cpnId;
    backstage.GeCpntListItems(this);
    backstage.GetPyChannelSelectListItems(this);
  },
  mounted() {
    // this.initTop = this.$refs.selectdiv.getBoundingClientRect().top  //原本的数据
    this.initTop = this.$refs.selectdiv.offsetTop; //现在修改为元素到顶部的位置

    // 监听滚动事件

    window.addEventListener("scroll", this.handleScrollStart);
  },
  methods: {
    StDtChange(e) {
      this.form.StDt = e == null ? "" : e.toLocaleDateString();
    },
    EdDtChange(e) {
      this.form.EdDt = e == null ? "" : e.toLocaleDateString();
    },
    CpnselectFn(e) {
      console.log(e);
      this.form.cpnid = e;
      backstage.GetPyChannelSelectListItems(this);
    },
    paychanelSelectFn(e) {
      console.log(e);
      this.form.paychannelid = e;
    },
    charttimerefresh() {
      this.form.charttimerefresh = commm.uuid(this);
    },
    Pierefresh() {
      this.form.pierefresh = commm.uuid(this);
    },
    //对账异常数按钮切换
    dayrectabChange(data) {
      var that = this;
      that.dayrecselectcount = data.currentTarget.dataset.select;
      console.log(that.dayrecselectcount);
    },
    //交易额按钮切换
    paycountChange(data) {
      var that = this;
      that.paycount = data.currentTarget.dataset.select;
      console.log(that.paycount);
    },
    handleScrollStart() {
      // 滚动时判断距离顶部的距离小于0的话就固定搜索框
      const scrollTop = document.documentElement.scrollTop;
      console.log(scrollTop);
      if (scrollTop - 20 - this.initTop >= 0) {
        this.position = "fixed";
        this.top = 0;
        this.lineheight = 80;
        this.mleft = -1.4;
        this.wd = "100%";
        this.backcolor = "#ffffff";
      } else {
        this.position = "static";
        this.top = this.initTop;
        this.lineheight = 0;
        this.mleft = 1;
        this.wd = "auto";
        this.backcolor = "transparent";
      }

      console.log("scrollTop:" + scrollTop);
    },
  },
};
var backstage = {
  GeCpntListItems: function (thisobj) {
    SelectAjax(
      "GeCpntListItems",
      function (response) {
        // console.log(response);
        var body = response.data;
        thisobj.cpnoptions = [];
        body.data.forEach((element) => {
          thisobj.cpnoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetPayTypeList: function (thisobj) {
    SelectAjax(
      "GetPayTypeList?val=",
      function (response) {
        var body = response.data;
        thisobj.paytypeoptions = [];
        body.data.forEach((element) => {
          thisobj.paytypeoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetPyChannelSelectListItems: function (thisobj) {
    SelectAjax(
      "GetPyChannelSelectListItemsByCpnid?val=" + thisobj.form.cpnid + "",
      function (response) {
        var body = response.data;
        thisobj.paytychanneloptions = [];
        body.data.forEach((element) => {
          thisobj.paytychanneloptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 0, -4px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 1.3rem 1.3rem 0;
    margin-bottom: 2.6rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 1);
    padding: 1.5rem 1.5rem 0;
    margin-top: 5rem;
    position: relative;
  }
}
.block {
  height: 36px;
  // background-color: red;
  margin-bottom: 30px;
}
h2 {
  text-align: center;
  margin: 1rem 0rem 1rem 0rem;
  position: relative;
  top: -1.5rem;
  height: 2rem;
  font-size: 1.5rem;

  font-weight: 400;
  line-height: 2.5rem;
  color: rgba(48, 65, 86, 1);
  opacity: 1;
}
.h2title {
  font-size: 24px !important;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 41px;
  color: #304156;
  opacity: 1;
}
.selectclass {
  margin-left: 1em;
  padding-left: -4px !important;
  margin-bottom: 30px;
  // height: 30px;
  z-index: 999999;
  /***
 position: fixed;
  top: 0;
  left: -10;
 /
  z-index: 999999; /*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
  -webkit-transition: 0.5s ease-in-out; /* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
  -moz-transition: 0.5s ease-in-out; /*这里为了兼容其他浏览器*/
  -o-transition: 0.5s ease-in-out;
}
.selectclass:hover {
  margin-left: 0px;
}
.table-container {
  position: static;
  margin-bottom: 30px;
}
.el-col {
  padding: 0px;
  margin: 0px;
}
.el-row {
  width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}

.leftbox {
  padding-top: 10px;
  height: 460px;
  background: #ffffff;
  border-radius: 2px;
  // padding-right: 12px;
  margin-bottom: 30px;
  position: relative;
}

.rightbox {
  padding-top: 10px;
  height: 460px;
  margin-bottom: 30px;
  background: #ffffff;
  border-radius: 2px;
  // padding-left: 12px;
  position: relative;
}
.title {
  // padding-right: 16px;
  height: 50px;
  position: relative;
  // border-bottom: 1px solid #e8e8e8;
}
.title h3 {
  position: absolute;
  margin: 0px;
  padding: 0px;
  // width: 112px;
  height: 24px;
  font-size: 16px !important;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  left: 24px;
  top: 16px;
}

.box2 {
  // width: 210px; //原本比例
  width: 100px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px #409eff;
  cursor: pointer;
}
.item3 {
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #409eff;
  font-size: 12px;
}
.active2 {
  border-radius: 20px;
  background: rgba(64, 158, 255, 1);
  color: white;
}
.el-radio-group {
  position: absolute;
  right: 56px;
  top: 12px;
  height: 32px;
}
::v-deep.el-radio-button .el-radio-button__inner {
  height: 32px;
  font-size: 14px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  // line-height: 22px;
}
.monitoring-box {
  height: 511px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 30px !important;
}
.left-item {
  background-color: #ffffff;
  padding-top: 10px;
  height: 374px;
  margin-bottom: 30px;
  position: relative;
}
.right-item {
  background-color: #ffffff;
  padding-top: 10px;
  height: 374px;
  margin-bottom: 30px;
  position: relative;
}
.refresh {
  position: absolute !important;
  right: 20px !important;
  top: 28px !important;
  z-index: 10;
}
footer{
  background-color: #ffffff;
  padding-top: 10px;
  height: 1000px;
  margin-bottom: 30px;
  position: relative;
}
</style>
